<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> -->
    <script src="../vue.js"></script>
    <title>List</title>
</head>
<body>
    <div id="app">
        Web 编辑语言，
        <ul>
            <!-- 1 -->
            <!-- <li v-for="language in languages">
                {{ language }}
            </li> -->

            <!-- 2v-test -->
            <!-- <li v-for="language in languages" v-text="language">
            </li> -->

            <!-- 3v-for进行循环迭代 -->
            <li v-for="(language,index) in languages">
                {{ index}}:{{ language }}
            </li>
            <div>
                <!-- <input type="text" id="input"/> -->
                <!-- <button type="button" id="button">添加</button> -->

                <!-- 2使用v-click点击事件监听 -->
                <!-- <button v-on:click="addLanguage">添加</button> -->

                <input type="text" v-model="newLanguage" @keyup.enter="addLanguage"/>
            </div>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                languages:[
                    'PHP',
                    'JavaScript',
                    'Python',
                    'Golang',
                    'Java'
                ],
                newLanguage: '',
            },
        //     mounted:() =>{
        //     document.querySelector('#button').addEventListener('click',()=>{
        //     let language = document.querySelector('#input');
        //     app.languages.push(language.value);//将输入语言添加到模型数据数组
        //     language.value = '';//清空输入框
        // });
        // }
            methods:{
                addLanguage(){
                    // 2
                    // let language = document.querySelector('#input');
                    // app.languages.push(language.value);
                    // language.value='';

                    this.languages.push(this.newLanguage);
                    this.newLanguage = '';
                }
            }
        });
        
    
    </script>
</body>
</html>